<template>
    <el-form :model="activityForm" :inline="true" style="margin-bottom: 10px;" class="demo-form-inline">
        <el-form-item label="团建名称">
            <el-input v-model="activityForm.teamBuildingName" style="width: 150px;" placeholder="请输入团建活动名称" />
        </el-form-item>
        <el-form-item label="活动状态">
            <el-select v-model="activityForm.activityStatus" style="width: 100px;" placeholder="请选择">
                <el-option label="正在进行" value="1"></el-option>
                <el-option label="已经结束" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开展时间">
            <el-date-picker v-model="activityForm.data" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                placeholder="选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                style="margin-left: 10px"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getTeamBuildingActivitiesMsg">查询</el-button>
            <el-button type="info" @click="resetActivityForm">清空</el-button>
        </el-form-item>
    </el-form>
    <div style="justify-content: space-between;">
        <el-button type="primary" @click="dialogVisible = true">新增团建活动</el-button>
        <el-button type="danger" @click="deleteTeamBuildingActivitiesByIds">批量删除</el-button>
    </div>
    <div>
        <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;margin-top: 10px;"
            @selection-change="getTeamBuildingMessage">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="id" width="100" />
            <el-table-column property="teamBuildingName" label="团建名称" width="120" />
            <el-table-column property="maxCapacity" label="人数上限" width="120" />
            <el-table-column property="actualAttendance" label="实际参加人数" width="120" />
            <el-table-column property="startTime" label="开展时间" width="200">
                <template #default="scope">
                    <span>
                        {{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="endTime" label="结束日期" width="200">
                <template #default="scope">
                    <span>
                        {{ moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="activityStatus" label="活动状态" width="120">
                <template #default="scope">
                    <span v-if="scope.row.activityStatus === 1">正在进行</span>
                    <span v-else-if="scope.row.activityStatus === 2">已经结束</span>
                </template>
            </el-table-column>
            <el-table-column style="justify-content: space-between;" label="操作">
                <template #default="scope">
                    <el-link style="margin-right:10px ;" target="_blank"
                        @click="getEmpTeamBuildingActivitiesById(scope.row.id)">查看</el-link>
                    <el-link type="primary" style="margin-right: 10px;"
                        @click="getTeamBuildingActivitiesMsgById(scope.row.id)">修改</el-link>
                    <el-link type="danger" @click="deleteTeamBuildingActivitiesById(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 10px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--  对话框-->
    <el-dialog v-model="dialogVisible" title="新增团建活动" width="500" draggable>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item style="width: 290px;" label="团建活动" prop="teamBuildingName">
                <el-input v-model="ruleForm.teamBuildingName" placeholder="请输入团建活动名称" clearable />
            </el-form-item>
            <el-form-item style="width: 290px;" label="人数上限" prop="maxCapacity">
                <el-input v-model="ruleForm.maxCapacity" clearable placeholder="请输入上限人数数量" />
            </el-form-item>
            <el-form-item label="开展时间" prop="startTime">
                <el-date-picker v-model="ruleForm.startTime" style="width: 210px;" type="datetime" placeholder="请选择开展时间"
                    clearable />
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker v-model="ruleForm.endTime" style="width: 210px;" type="datetime" placeholder="请选择结束时间"
                    clearable />
            </el-form-item>
            <el-form-item
                style="justify-content: space-between;justify-content: center;align-items: center;display: flex;">
                <el-button type="primary" @click="addTeamBuildingActivities">确定</el-button>
                <el-button @click="resetForm(ruleFormRef)">清空</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 修改数据对话框 -->
    <el-dialog v-model="modifyDialogVisible" title="新增团建活动" width="500" draggable>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="modifyTeamBuildingMsgForm" :rules="rules"
            label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item style="width: 290px;" label="团建活动" prop="teamBuildingName">
                <el-input v-model="modifyTeamBuildingMsgForm.teamBuildingName" placeholder="请输入团建活动名称" clearable />
            </el-form-item>
            <el-form-item style="width: 290px;" label="人数上限" prop="maxCapacity">
                <el-input v-model="modifyTeamBuildingMsgForm.maxCapacity" clearable placeholder="请输入上限人数数量" />
            </el-form-item>
            <el-form-item label="开展时间" prop="startTime">
                <el-date-picker v-model="modifyTeamBuildingMsgForm.startTime" style="width: 210px;"
                    value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择开展时间" clearable />
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker v-model="modifyTeamBuildingMsgForm.endTime" style="width: 210px;"
                    value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择结束时间" clearable />
            </el-form-item>
            <el-form-item label="活动状态" prop="activityStatus">
                <el-select v-model="modifyTeamBuildingMsgForm.activityStatus" style="width: 190px;" placeholder="请选择">
                    <el-option label="正在进行" value="1"></el-option>
                    <el-option label="已经结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                style="justify-content: space-between;justify-content: center;align-items: center;display: flex;">
                <el-button type="primary" @click="modifyTeamBuildingActivities">确定</el-button>
                <el-button @click="resetForm(ruleFormRef)">清空</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 查看表格对话框 -->
    <el-dialog v-model="tableDialogVisible" title="活动情况" style="width: 90%;" draggable>
        <el-form :model="activityFormTable" :inline="true" style="margin-bottom: 10px;" class="demo-form-inline">
            <el-form-item label="员工名称">
                <el-input v-model="activityFormTable.name" style="width: 130px;" placeholder="请输入员工名称" />
            </el-form-item>
            <el-form-item label="员工性别">
                <el-select v-model="activityFormTable.gender" style="width: 100px;" placeholder="请选择">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工账号">
                <el-input v-model="activityFormTable.account" style="width: 130px;" placeholder="请输入员工账号" />
            </el-form-item>
            <el-form-item label="报名时间">
                <el-date-picker v-model="activityFormTable.registrationTime" value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    :size="size" />
            </el-form-item>
            <el-form-item label="活动时长">
                <el-input v-model="activityFormTable.activityDuration" style="width: 130px;" placeholder="请输入活动时长" />
            </el-form-item>
            <el-form-item label="活动状态" prop="empActivityStatus">
                <el-select v-model="activityFormTable.empActivityStatus" clearable style="width: 130px;"
                    placeholder="请选择">
                    <el-option label="未开始活动" value="0"></el-option>
                    <el-option label="正在活动中" value="1"></el-option>
                    <el-option label="已经结束活动" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getEmpTeamBuildingActivitiesById(teamBuildingActId)">查询</el-button>
                <el-button type="info" @click="clearActivityFormTable">清空</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
            <el-button type="danger" @click="deleteEmpTeamBuildingActivitiesByAccounts">批量删除</el-button>
        </div>
        <el-table :data="userTableData" border style="width: 90%;margin-bottom: 10px;margin-top: 10px;"
         @selection-change="getEmpTeamBuildingActivitiesMsg">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="id" width="100" />
            <el-table-column property="teamBuildingName" label="活动名称" width="120" />
            <el-table-column property="name" label="员工姓名" width="120" />
            <el-table-column property="gender" label="员工性别" width="120">
                <template #default="scope">
                    <span v-if="scope.row.gender === 1">男</span>
                    <span v-else-if="scope.row.gender === 2">女</span>
                </template>
            </el-table-column>
            <el-table-column property="account" label="员工账号" width="120" />
            <el-table-column property="registrationTime" label="报名时间" width="200">
                <template #default="scope">
                    {{ moment(scope.row.registrationTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column property="activityDuration" label="活动时长" width="120" />
            <el-table-column property="empActivityStatus" label="活动状态" width="120">
                <template #default="scope">
                    <span v-if="scope.row.empActivityStatus === 0">未开始活动</span>
                    <span v-else-if="scope.row.empActivityStatus === 1">正在活动中</span>
                    <span v-else-if="scope.row.empActivityStatus === 2">已经结束活动</span>
                </template>
            </el-table-column>
            <el-table-column style="justify-content: space-between;" label="操作">
                <template #default="scope">
                    <el-link type="danger" @click="deleteEmpTeamBuildingActivitiesByAccount(scope.row.account)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
            <el-pagination v-model:current-page="empCurrentPage" v-model:page-size="empPageSize"
                :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="dialogTotal" @size-change="empHandleSizeChange"
                @current-change="empHandleCurrentChange" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from '@/utils/request.js'
import moment from 'moment'
const background = ref(true)
const dialogVisible = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const empCurrentPage = ref(1)
const empPageSize = ref(10)
const total = ref(0)
const dialogTotal = ref(0)
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const tableDialogVisible = ref(false)
const modifyDialogVisible = ref(false)
//获取复选框的表格信息
const teamBuildingActivitiesMsg = ref([])
//获取复选框的id数组
const teamBuildingActivitiesId = ref([])
// 表格数据数组
const getTeamBuildingMessage = (val: any) => {
    teamBuildingActivitiesMsg.value = val;
}
const ruleForm = reactive({
    teamBuildingName: '',
    maxCapacity: '',
    startTime: '',
    endTime: '',
})

let activityForm = ref({
    teamBuildingName: '',
    activityStatus: '',
    data: ['', '']
})
//清空表单
let resetActivityForm = () => {
    activityForm.value = {
        teamBuildingName: '',
        activityStatus: '',
        data: ['', '']
    };
    // 重新获取数据
    getTeamBuildingActivitiesMsg();
};
const tableData = ref([])
//点击修改后的对话框的表单数据
const modifyTeamBuildingMsgForm = reactive({
    id: '',
    teamBuildingName: '',
    maxCapacity: '',
    startTime: '',
    endTime: '',
    activityStatus: ''
})
const userTableData = ref([])
const activityFormTable = ref({
    name: '',
    gender: '',
    account: '',
    registrationTime: ['', ''],
    activityDuration: '',
    empActivityStatus: ''
})
const clearActivityFormTable = () => {
    activityFormTable.value = {
        name: '',
        gender: '',
        account: '',
        registrationTime: ['', ''],
        activityDuration: '',
        empActivityStatus: ''
    };
    // 重新获取数据
    getEmpTeamBuildingActivitiesById(teamBuildingActId.value);
};
const rules = reactive<FormRules>({
    teamBuildingName: [
        { required: true, message: '请输入团建活动名称', trigger: 'blur' },
    ],
    maxCapacity: [
        { required: true, message: '请输入人数', trigger: 'blur' },
        { min: 0, message: '人数必须大于零', trigger: 'blur' }
    ],
    startTime: [
        { required: true, message: '请选择时间', trigger: 'change' },
    ],
    endTime: [
        { required: true, message: '请选择时间', trigger: 'change' },
    ],
    activityStatus: [
        { required: true, message: '请选择活动状态', trigger: 'change' },
    ]
})
//页面挂载时
onMounted(() => {
    getTeamBuildingActivitiesMsg()
})
//当前页面的改变
const handleCurrentChange = (val: number) => {
    //将当前页的值赋值给currentPage
    currentPage.value = val
    //当页数改变时，重新加载数据
    getTeamBuildingActivitiesMsg()
}
//页数大小发送改变
const handleSizeChange = (val: number) => {
    //将页面大小赋值给pageSize
    pageSize.value = val
    //当页面大小改变时，重新加载数据
    getTeamBuildingActivitiesMsg()
}
//员工报名活动的当前页面改变
const empHandleCurrentChange = (val: number) => {
    empCurrentPage.value = val
    // 当员工报名活动的当前页改变时，重新加载数据
    getEmpTeamBuildingActivitiesById(teamBuildingActId.value);
}
//员工报名活动的页面大小改变
const empHandleSizeChange = (val: number) => {
    empPageSize.value = val
    // 当员工报名活动的页面大小改变时，重新加载数据
    getEmpTeamBuildingActivitiesById(teamBuildingActId.value);
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 查询团建活动相关信息的异步函数
const getTeamBuildingActivitiesMsg = async () => {
    try {
        // 发起GET请求，根据多个条件动态拼接接口地址来查询团建活动信息
        const result = await axios.get(`/admin/teamBuildingActivities?page=${currentPage.value}&pageSize=${pageSize.value}
        &teamBuildingName=${activityForm.value.teamBuildingName}&activityStatus=${activityForm.value.activityStatus}
        &begin=${activityForm.value.data[0]}&end=${activityForm.value.data[1]}`);
        // 判断查询是否成功，成功则处理返回数据并按需显示提示信息
        if (result.data.code === 1) {
            tableData.value = result.data.data.rows;
            total.value = result.data.data.total;
            if (activityForm.value.teamBuildingName != '' || activityForm.value.activityStatus != '' || activityForm.value.data[0] != '' || activityForm.value.data[1] != '') {
                ElMessage.success('查询成功');
            }
        } else {
            ElMessage.error('查询失败');
        }
    } catch (error) {
        console.error('查询团建活动信息时出现错误:', error);
        ElMessage.error('查询出现异常，请稍后再试');
    }
};

// 添加团建活动信息的异步函数
const addTeamBuildingActivities = async () => {
    // 检查必填信息是否完整，不完整则提示并返回
    if (!ruleForm.teamBuildingName || !ruleForm.maxCapacity || !ruleForm.startTime || !ruleForm.endTime) {
        ElMessage.error('请填写完整信息');
        return;
    }
    //判断选择时间的正确性
    if (ruleForm.startTime > ruleForm.endTime) {
        ElMessage.error('开展时间不能大于结束时间');
        return;
    }
    try {
        // 发起POST请求添加团建活动信息
        const result = await axios.post('/admin/teamBuildingActivities', ruleForm);
        // 根据返回结果判断添加是否成功并做相应处理
        if (result.data.code === 1) {
            ElMessage.success('添加成功');
            //清空表单
            resetForm(ruleFormRef.value);
            dialogVisible.value = false;
            getTeamBuildingActivitiesMsg();
        } else {
            ElMessage.error('添加失败，请检查格式是否出错');
        }
    } catch (error) {
        console.error('添加团建活动信息时出现错误:', error);
        ElMessage.error('添加出现异常，请稍后再试');
    }
};

// 单个删除团队建设活动的函数
const deleteTeamBuildingActivitiesById = async (id: number) => {
    // 弹出确认框让用户确认删除
    const isConfirm = window.confirm('确定要删除吗？');
    if (!isConfirm) {
        return;
    }
    try {
        // 发送DELETE请求删除指定ID的活动
        const result = await axios.delete(`/admin/teamBuildingActivities/${id}`);
        // 根据返回结果判断删除是否成功并处理
        if (result.data.code === 1) {
            ElMessage.success('删除成功');
            getTeamBuildingActivitiesMsg();
        } else {
            ElMessage.error('删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败，请检查网络或联系后台管理员');
    }
};

// 批量删除团队建设活动的函数
const deleteTeamBuildingActivitiesByIds = async () => {
    // 检查是否有选择要删除的活动，无则提示并返回
    if (teamBuildingActivitiesMsg.value.length === 0) {
        ElMessage.error('请选择要删除的活动');
        return;
    } else {
        teamBuildingActivitiesId.value = teamBuildingActivitiesMsg.value.map((item: any) => item.account);
    }
    // 弹出确认框让用户确认批量删除
    const isConfirm = window.confirm('确定要删除吗？');
    if (!isConfirm) {
        return;
    }
    try {
        // 发送DELETE请求批量删除活动
        const result = await axios.delete(`/admin/teamBuildingActivities/${teamBuildingActivitiesId.value.join(',')}`);
        // 根据返回结果判断批量删除是否成功并处理
        if (result.data.code === 1) {
            ElMessage.success('删除成功');
            getTeamBuildingActivitiesMsg();
        } else {
            ElMessage.error('删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败，请检查网络或联系后台管理员');
    }
};

// 根据ID获取团队建设活动信息用于修改的函数
const getTeamBuildingActivitiesMsgById = async (id: any) => {
    modifyDialogVisible.value = true;
    try {
        // 发送GET请求获取指定ID的活动信息
        const result = await axios.get(`/admin/teamBuildingActivities/${id}`);
        // 根据返回结果判断获取是否成功并处理
        if (result.data.code === 1) {
            modifyTeamBuildingMsgForm.id = id;
            modifyTeamBuildingMsgForm.teamBuildingName = result.data.data.teamBuildingName;
            modifyTeamBuildingMsgForm.maxCapacity = result.data.data.maxCapacity;
            modifyTeamBuildingMsgForm.startTime = moment(result.data.data.startTime).format('YYYY-MM-DD HH:mm:ss');
            modifyTeamBuildingMsgForm.endTime = moment(result.data.data.endTime).format('YYYY-MM-DD HH:mm:ss');
            // 处理活动状态字段
            modifyTeamBuildingMsgForm.activityStatus = result.data.data.activityStatus === 1 ? '1' : '2';
        } else {
            ElMessage.error('获取数据失败');
        }
    } catch (error) {
        console.error('获取数据失败:', error);
        ElMessage.error('获取数据失败，请检查网络或联系后台管理员');
    }
};
//修改团建活动信息的函数
const modifyTeamBuildingActivities = async () => {
    // 检查必填信息是否完整，不完整则提示并返回
    if (!modifyTeamBuildingMsgForm.teamBuildingName || !modifyTeamBuildingMsgForm.maxCapacity || !modifyTeamBuildingMsgForm.startTime || !modifyTeamBuildingMsgForm.endTime) {
        ElMessage.error('请填写完整信息');
        return;
    }
    try {
        // 发送PUT请求修改指定ID的活动信息
        const result = await axios.put(`/admin/teamBuildingActivities`, {
            id: modifyTeamBuildingMsgForm.id,
            teamBuildingName: modifyTeamBuildingMsgForm.teamBuildingName,
            maxCapacity: modifyTeamBuildingMsgForm.maxCapacity,
            startTime: modifyTeamBuildingMsgForm.startTime,
            endTime: modifyTeamBuildingMsgForm.endTime,
            activityStatus: modifyTeamBuildingMsgForm.activityStatus
        });
        // 根据返回结果判断修改是否成功并处理
        if (result.data.code === 1) {
            ElMessage.success('修改成功');
            // 关闭对话框并刷新数据
            modifyDialogVisible.value = false;
            // 刷新数据
            getTeamBuildingActivitiesMsg();
        } else {
            ElMessage.error('修改失败');
        }
    } catch (error) {
        console.error('修改失败:', error);
        ElMessage.error('修改失败，请检查网络或联系后台管理员');
    }
};
const teamBuildingActId = ref()
//团建活动详情表查询，分页查询
const getEmpTeamBuildingActivitiesById = async (id: any) => {
    // 把id赋值给teamBuildingActId
    teamBuildingActId.value = id;
    //对话框展示
    tableDialogVisible.value = true;
    try {
        // 发起GET请求，根据多个条件动态拼接接口地址来查询团建活动信息
        const result = await axios.get(`/admin/empTeamBuildingActivities?page=${empCurrentPage.value}&pageSize=${empPageSize.value}
        &name=${activityFormTable.value.name}&gender=${activityFormTable.value.gender}&account=${activityFormTable.value.account}
        &begin=${activityFormTable.value.registrationTime[0]}&end=${activityFormTable.value.registrationTime[1]}&activityDuration=${activityFormTable.value.activityDuration}
        &empActivityStatus=${activityFormTable.value.empActivityStatus}&id=${id}`);
        // 判断查询是否成功，成功则处理返回数据并按需显示提示信息
        if (result.data.code === 1) {
            userTableData.value = result.data.data.rows;
            dialogTotal.value = result.data.data.total;
            //查询提醒
            if (activityFormTable.value.name != '' || activityFormTable.value.gender != '' || activityFormTable.value.account != '' ||
                activityFormTable.value.registrationTime[0] != '' || activityFormTable.value.registrationTime[1] != '' || activityFormTable.value.activityDuration != ''
                || activityFormTable.value.empActivityStatus != '') {
                ElMessage.success('查询成功');
            }
        } else {
            ElMessage.error('查询失败');
        }
    } catch (error) {
        console.error('查询团建活动信息时出现错误:', error);
        ElMessage.error('查询出现异常，请稍后再试');
    }
}
//删除单个员工报名信息
const deleteEmpTeamBuildingActivitiesByAccount = async (account: number) => {
    // 弹出确认框让用户确认删除
    const isConfirm = window.confirm('确定要删除吗？');
    if (!isConfirm) {
        return;
    }
    try {
        // 发送DELETE请求删除指定ID的活动
        const result = await axios.delete(`/admin/empTeamBuildingActivities/${account}`);
        // 根据返回结果判断删除是否成功并处理
        if (result.data.code === 1) {
            ElMessage.success('删除成功');
            getEmpTeamBuildingActivitiesById(teamBuildingActId.value);
        } else {
            ElMessage.error('删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败，请检查网络或联系后台管理员');
    }
};
//选中团建活动员工报名信息ID数组
const empTeamBuildingActivitiesAccount = ref([])
//选中的员工报名信息数组
const empTeamBuildingActivitiesMsg = ref([])
//获取复选框选中表格的信息
const getEmpTeamBuildingActivitiesMsg = (val: any) => {
    empTeamBuildingActivitiesMsg.value = val;
}
// 批量删除员工报名信息
const deleteEmpTeamBuildingActivitiesByAccounts = async () => {
    // 检查是否有选择要删除的活动，无则提示并返回
    if (empTeamBuildingActivitiesMsg.value.length === 0) {
        ElMessage.error('请选择要删除的活动');
        return;
    } else {
        empTeamBuildingActivitiesAccount.value = empTeamBuildingActivitiesMsg.value.map((item: any) => item.id);
    }
    // 弹出确认框让用户确认批量删除
    const isConfirm = window.confirm('确定要删除吗？');
    if (!isConfirm) {
        return;
    }
    try {
        // 发送DELETE请求批量删除活动
        const result = await axios.delete(`/admin/empTeamBuildingActivities/${empTeamBuildingActivitiesAccount.value.join(',')}`);
        // 根据返回结果判断批量删除是否成功并处理
        if (result.data.code === 1) {
            ElMessage.success('删除成功');
            getEmpTeamBuildingActivitiesById(teamBuildingActId.value);
        } else {
            ElMessage.error('删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败，请检查网络或联系后台管理员');
    }
};

</script>

<style></style>
